<section class="live_upcoming">
  <header class="live_upcoming-header">

    <h1 class="live_upcoming-header-heading"><%= header_for_episode_list(@episodes) %></h1>

    <ul class="live_upcoming-header-subscribe_links">
      <li>Subcribe via iCal: </li>
      <li>
        <a href="webcal://changelog.com/live/ical" title="iCal feed for all podcasts">All Pods</a>
      </li>
      <li>
        <a href="webcal://changelog.com/live/ical/gotime" title="iCal feed for Go Time">Go Time</a>
      </li>
      <li>
        <a href="webcal://changelog.com/live/ical/jsparty" title="iCal feed for JS Party">JS Party</a>
      </li>
    </ul>
  </header>
<%= if Enum.any?(@episodes) do %>
  <div class="live_upcoming-grid">
  <%= for episode <- @episodes do %>
    <%= link to: live_link(episode), title: "View Live", class: "live_upcoming-grid-item live_upcoming-grid-item--live" do %>
      <div class="live_upcoming-grid-item-image">
        <div class="image_border_hack">
          <%= SharedHelpers.lazy_image(PodcastView.cover_url(episode.podcast, :medium), "#{episode.podcast.name} Artwork", width: 120, height: 120) %>
        </div>
      </div>

      <div class="live_upcoming-grid-item-time">
        <div>
          <p><strong><%= TimeView.ts(episode.recorded_at, "dayAndDate") %></strong></p>
          <p><%= TimeView.ts(episode.recorded_at, "amPm") %></p>
        </div>
      </div>

      <div class="live_upcoming-grid-item-info">
        <div>
          <p><strong>
            <%= EpisodeView.podcast_name_and_number(episode) %>
          </strong></p>
          <p><%= episode_title_with_subtitle(episode) %></p>
        </div>
      </div>

      <%= if should_be_live(episode) do %>
        <span class="live_upcoming-grid-item-live_indicator">LIVE <span></span></span>
      <% end %>
    <% end %>
  <% end %>
  </div>
<% end %>
</section>
